<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/base.css" type="text/css" />
    <link rel="stylesheet" href="css/common.css" type="text/css" />
    <link rel="stylesheet" href="css/seckill.css" type="text/css" />
    <script src="js/common.js" type="text/javascript"></script>
    <script>
        window.addEventListener("load", function () {
            var hour = document.querySelector('.hour');
            var minute = document.querySelector('.minute');
            var second = document.querySelector('.second');
            // 修正无效日期
            var inputTime = +new Date('2025-6-18 22:00:00');
            // 存储定时器 ID
            var timer = setInterval(countDown, 1000);
            countDown();

            function countDown() {
                var nowTime = +new Date();
                var times = (inputTime - nowTime) / 1000;

                // 处理倒计时结束的情况
                if (times < 0) {
                    clearInterval(timer);
                    hour.innerHTML = '00';
                    minute.innerHTML = '00';
                    second.innerHTML = '00';
                    return;
                }

                // 修复小时计算逻辑，移除 % 24
                var h = parseInt(times / 60 / 60);
                h = h < 10 ? '0' + h : h;
                hour.innerHTML = h;
                var m = parseInt(times / 60 % 60);
                m = m < 10 ? '0' + m : m;
                minute.innerHTML = m;
                var s = parseInt(times % 60);
                s = s < 10 ? '0' + s : s;
                second.innerHTML = s;
            }
        })

    </script>
</head>

<body>
    <!-- 客服聊天框 -->
    <div class="chatbox" id="chatbox">
        <div class="chatbox-header">
            <span>客服聊天</span>
            <button class="chatbox-close" id="chatbox-close">×</button>
        </div>
        <div class="chatbox-messages" id="chatbox-messages"></div>
        <div class="chatbox-input">
            <input type="text" id="chatbox-input" placeholder="请输入消息">
            <button id="chatbox-send">发送</button>
        </div>
    </div>
    <!-- 文字滚动效果部分 -->
    <div class="announcement">
        <div class="announcement-contain">
            <p><img src="./image/notice-icon.png">欢迎访问我们的网站！这里有最新的产品信息和优惠活动，敬请关注！</p>
        </div>

    </div>

    <!-- 导航部分 -->
    <div class="nav">
        <div class="w">
            <ul class="nav_left fl">
                <li>
                    <a href="#">正品保障，免息分期!</a>
                </li>
            </ul>
            <ul class="nav_right">
                <li>
                    <a href="./user.html" target="_blank">用户中心</a>
                </li>
                <li>
                    <a href="./register.html" target="_blank" style="color: #ae0f17;">注册即送6800元大礼包</a>
                </li>
                <li>
                    <span>|</span>
                </li>
                <li>
                    <a href="./cart.html">购物车</a>
                </li>
                <li>
                    <a href="#" id="customer-service">客服服务</a>
                </li>
                <li>
                    <a href="javascript:;" class="theme" id="theme">切换主题</a>

                </li>
                <li>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">ENGLISH</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部部分 -->
    <div class="header w">
        <!-- 头部logo部分 -->
        <div class="header_left fl">
            <h1 class="logo fl">
                <a href="#">
                    <img src="image/logo.png" />
                </a>
            </h1>
            <a href="#" class="logo_text">
                <h1>全球名表专业大平台</h1>
            </a>
        </div>
        <!-- 头部搜索部分 -->
        <div class="header_right fl">
            <div class="header_search">
                <label class="srh_lab fl">
                    <i></i>
                    <span class="srh_txt">阿玛尼5年电保</span>
                    <input type="text" class="srh_news" />
                </label>
                <button class="srh_btn fl">搜索</button>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="w">
            <!-- 秒杀部分开始 -->
            <div class="seckill w">
                <!-- 秒杀左边部分开始 -->
                <div class="seckill-left">
                    <div class="seckill-left-body">
                        <div class="seckill-left-top">
                            <h2>万表手表秒杀</h2>
                            <h3>FLASH&nbsp;DEALS</h3>
                        </div>
                        <div class="seckill-left-center">
                            <h3>本场距离结束还剩</h3>
                            <!-- 添加倒计时元素 -->
                            <div class="countdown">
                                <span class="hour">00</span> <i>:</i>
                                <span class="minute">00</span> <i>:</i>
                                <span class="second">00</span>
                            </div>
                        </div>
                        <div class="seckill-left-bottom">
                        </div>
                    </div>
                </div>
                <!-- 秒杀左边部分结束 -->

                <!-- 秒杀右边部分开始 -->
                <div class="seckill-right">
                    <a href="./detail.html" target="_blank" class="fl">
                        <div class="like_img">
                            <img src="img/猜你喜欢1.jpg" />
                        </div>
                        <p class="p1">瑞士欧米茄</p>
                        <p class="p2">海马系列自动机械男表</p>
                        <div class="like_price">
                            <span class="z_price">
                                <em>¥</em>34645
                            </span>
                            <span class="fenqi_price">
                                <em>¥</em>
                                2888
                                <em>/月</em>
                            </span>
                        </div>
                    </a>
                    <a href="./detail.html" target="_blank" class="fl">
                        <div class="like_img">
                            <img src="img/猜你喜欢1.jpg" />
                        </div>
                        <p class="p1">瑞士欧米茄</p>
                        <p class="p2">海马系列自动机械男表</p>
                        <div class="like_price">
                            <span class="z_price">
                                <em>¥</em>34645
                            </span>
                            <span class="fenqi_price">
                                <em>¥</em>
                                2888
                                <em>/月</em>
                            </span>
                        </div>
                    </a>
                    <a href="./detail.html" target="_blank" class="fl">
                        <div class="like_img">
                            <img src="img/猜你喜欢1.jpg" />
                        </div>
                        <p class="p1">瑞士欧米茄</p>
                        <p class="p2">海马系列自动机械男表</p>
                        <div class="like_price">
                            <span class="z_price">
                                <em>¥</em>34645
                            </span>
                            <span class="fenqi_price">
                                <em>¥</em>
                                2888
                                <em>/月</em>
                            </span>
                        </div>
                    </a>

                    <!-- 秒杀右边部分结束 -->
                </div>
                <!-- 秒杀部分结束 -->

            </div>
            <!-- 手风琴部分开始 -->
            <section class="main_box">
                <div class="box">
                    <ul>
                        <li class="on">
                            <a href="#">
                                <h3>瑞士欧米茄</h3>
                                <p>海马系列</p>
                                <img src="img/猜你喜欢1.jpg" alt="img">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <h3>瑞士欧米茄</h3>
                                <p>海马系列</p>
                                <img src="img/猜你喜欢2.jpg" alt="img">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <h3>瑞士欧米茄</h3>
                                <p>海马系列</p>
                                <img src="img/猜你喜欢3.jpg" alt="img">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <h3>瑞士欧米茄</h3>
                                <p>海马系列</p>
                                <img src="img/猜你喜欢4.jpg" alt="img">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <h3>瑞士欧米茄</h3>
                                <p>海马系列</p>
                                <img src="img/猜你喜欢1.jpg" alt="img">
                            </a>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <!-- 底部部分开始 -->
    <div class="footer">
        <!-- 底部上面部分开始 -->
        <div class="footer_top">
            <div class="w">
                <a href="#">
                    <span class="footer_top_1"></span>
                    正品保障
                </a>
                <a href="#">
                    <span class="footer_top_2"></span>
                    免息分期
                </a>
                <a href="#">
                    <span class="footer_top_3"></span>
                    全球联保
                </a>
                <a href="#">
                    <span class="footer_top_4"></span>
                    假一赔三
                </a>
                <a href="#">
                    <span class="footer_top_5"></span>
                    终身售后
                </a>
            </div>
        </div>
        <!-- 底部上面部分结束 -->

        <!-- 底部中间部分开始 -->
        <div class="footer_center w">
            <!-- 底部中间左边部分开始 -->
            <div class="footer_center_l">
                <h5>客服电话</h5>
                <h2>400-883-2688</h2>
                <span>外呼电话&nbsp;020-83931899</span>
                <a href="#">售后维修</a>
            </div>
            <!-- 底部中间左边部分结束 -->
            <div class="footer_center_r">
                <dl>
                    <dt>新手指南</dt>
                    <dd>
                        <a href="#">注册新会员</a>
                        <a href="#">购物流程</a>
                        <a href="#">手表小知识</a>
                        <a href="#">退换货流程</a>
                    </dd>
                </dl>
                <dl>
                    <dt>支付</dt>
                    <dd>
                        <a href="#">支付方式</a>
                        <a href="#">分期付款</a>
                        <a href="#">发票说明</a>
                        <a href="#">支付问题</a>
                    </dd>
                </dl>
                <dl>
                    <dt>配送</dt>
                    <dd>
                        <a href="#">包裹签收</a>
                        <a href="#">配送方式</a>
                        <a href="#">配送说明</a>
                        <a href="#">自提流程</a>
                    </dd>
                </dl>
                <dl>
                    <dt>手表保障</dt>
                    <dd>
                        <a href="#">正品保障</a>
                        <a href="#">售后服务</a>
                        <a href="#">价格保护</a>
                        <a href="#">七天退换说明</a>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 底部中间部分结束 -->
        <!-- 底部下间部分开始 -->
        <div class="footer_bottom">
            <div class="w">
                <div class="footer_bottom_t">
                    <a href="#">新款手表</a>
                    <a href="#">手表图片</a>
                    <a href="#">高价回收</a>
                    <a href="#">手表资讯</a>
                    <a href="#">网站联盟</a>
                    <a href="#">手表排行榜</a>
                    <a href="#">手表问答</a>
                    <a href="#">手表专题</a>
                    <a href="#">手表常识</a>
                    <span class="footer_gd">></span>
                    <p class="footer_list">
                        <a href="#">伯爵手表</a>
                        <a href="#">江诗丹顿手表</a>
                        <a href="#">百达翡丽手表</a>
                        <a href="#">宝珀手表</a>
                        <a href="#">爱宝时手表</a>
                        <a href="#">浪琴手表</a>
                        <a href="#">豪利时手表</a>
                        <a href="#">东方星手表</a>
                        <a href="#">卡地亚手表</a>
                    </p>
                </div>
                <div class="footer_bottom_b">
                    <p>&copy;万表网名表商城 版权所有 2009-2021 </p>
                    <p>广州市万表科技股份有限公司 地址:广州市番禺区番禺大道北16号</p>
                    <p>Copyright 2009-2021 WWW.WBIAO.CN.LTD ALL RIGHT RESERVED.</p>
                </div>
            </div>

        </div>
        <!-- 底部下间部分结束 -->
    </div>
    <!--引入jquery库-->
    <script src="js/jquery-3.5.0.js"></script>
    <script src="js/seckill.js"></script>
</body>

</html>